<script setup>
    import {ref,reactive} from 'vue'

    // 导入发送异步请求的request对象
    import request  from '../utils/request'

    // 导入编程式路由
    import {useRouter} from  'vue-router'
    let  router =useRouter();


    // 导入pinia的数据
    import {defineUser} from '../store/userStore'
    let user = defineUser()

    // 定义响应式数据
    let loginUser = reactive({
        username:"",
        userPwd:""
    })
    let usernameMsg= ref("")
    let userPwdMsg =ref("")
    // 定义数据格式校验的方法
    let checkUsername = ()=>{
        // 校验数据格式,返回true和false
        let usernameReg=/^[a-zA-Z0-9]{5,10}$/
        if(usernameReg.test(loginUser.username)){
            usernameMsg.value="OK"
            return true
        }
        usernameMsg.value="NO"
        return false
    }

    let checkUserPwd = ()=>{
        // 校验密码格式 
        let passwordReg=/^[0-9]{6}$/
        if(passwordReg.test(loginUser.userPwd)){
            userPwdMsg.value="OK"
            return true
        }
        userPwdMsg.value="NO"
        return false
    }

    // 完成用户登录的方法
    async function login (){
        // 校验格式 
        let f1 =checkUsername();
        let f2 = checkUserPwd()
        // 格式通过 发送请求,提交用户输入的用户名和密码
        if(f1 && f2){
             let {data} = await request.post("/user/login",loginUser)   
             // 根据响应结果判断登录是否成功  
             // 1 登录成功 跳转到日程管理页 弹窗提示
             if(data.code == "200"){ 
                alert("登陆成功")
                //  将登录的用户信息 存入pinia
                user.uid =data.data.loginUser.uid    
                user.username=data.data.loginUser.username  

               
                router.push("/showSchedule")
                // 2 登录失败 停留在当前页 弹窗提示
            }else if(data.code == "501" ){
                alert("用户不存在")

            }else if(data.code == "503"){
                alert("密码有误")
            }else{
                alert("出现其他问题")
            }
        }
    }
</script>
<template>
  <div>
    <h3 class="ht">请登录</h3>
        <table class="tab" cellspacing="0px">
            <tr class="ltr">
                <td>请输入账号</td>
                <td>
                    <input class="ipt" 
                    type="text" 
                    v-model="loginUser.username"
                    @blur="checkUsername()">
                    <span id="usernameMsg" v-text="usernameMsg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td>请输入密码</td>
                <td>
                    <input class="ipt" 
                    type="password" 
                    v-model="loginUser.userPwd"
                    @blur="checkUserPwd()">
                    <span id="userPwdMsg" v-text="userPwdMsg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td colspan="2" class="buttonContainer">
                    <input class="btn1" type="button" value="登录" @click="login()">
                    <input class="btn1" type="button" value="重置">
                    <router-link to="/regist">
                      <button class="btn1">去注册</button>
                    </router-link>
                </td>
            </tr>
        </table>
  </div>
</template>
<style scoped>
        .ht{
            text-align: center;
            color: cadetblue;
            font-family: 幼圆;
        }
        .tab{
            width: 500px;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
        }
        .ltr td{
            border: 1px solid  powderblue;
        }
        .ipt{
            border: 0px;
            width: 50%;
        }
        .btn1{
            border: 2px solid powderblue;
            border-radius: 4px;
            width:60px;
            background-color: antiquewhite;
        }
        #usernameMsg , #userPwdMsg {
            color: gold;
        }
        .buttonContainer{
            text-align: center;
        }
</style>